<div ng-controller="TemplateCtrl">
	<header style="margin:5px">
		<form class="form-inline">
			<div class="btn-group">
				<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					<span class="clip" style="width:94px;">{{crud.project.name || ' - 请选择项目 - '}}</span>
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu dropdown-menu-sm">
					<li><a ng-click="crud.p.q.projectId=undefined; crud.project=undefined; crud.p.load(true)"> - 请选择项目 - </a></li>
					<li ng-repeat="p in projects">
						<a ng-click="crud.p.q.projectId=p.id; crud.project=p; crud.p.load(true)">{{p.name}}</a>
					</li>
				</ul>
			</div>
			<button class="btn btn-default" ng-click="crud.p.reset();crud.project=undefined">重置</button>
			<button class="btn btn-success pull-right" data-toggle="modal" data-target="#templateAddModal"
			        ng-click="crud.add();crud.record.project=crud.project">添加模板</button>
		</form>
	</header>
	<section class="table-responsive" style="overflow-y:auto">
		<table class="table table-hover" style="margin-bottom:0">
			<thead>
			<tr>
				<th>#</th>
				<th>项目</th>
				<th width="50%">文件保存路径</th>
				<th width="10%">启用</th>
				<th width="20%">操作</th>
			</tr>
			</thead>
			<tbody>
			<tr ng-repeat="r in crud.p.data">
				<td>{{$index+1}}</td>
				<td>{{projects[r.projectId].name}}</td>
				<td>{{projects[r.projectId].path + r.path + (r.cap ? ('YourModule') : 'yourModule') + r.suffix}}</td>
				<td><label><input type="checkbox" ng-init="false" ng-model="r.valid" ng-change="crud.save(r)"></label>
				</td>
				<td>
					<a ng-click="crud.view(r)" data-toggle="modal" data-target="#templateViewModal">查看</a>
					<a ng-click="crud.edit(r)" data-toggle="modal" data-target="#templateEditModal">修改</a>
					<a ng-click="crud.remove(r)">删除</a>
				</td>
			</tr>
			</tbody>
		</table>
	</section>
	<footer>
		<div class="flow page-ul dropup">
			<div class="btn-group">
				<button class="btn btn-default" ng-click="crud.p.first();"><i class="fa fa-step-backward"></i></button>
				<button class="btn btn-default" ng-click="crud.p.prev();"><i class="fa fa-backward"></i></button>
				<div class="btn-group">
					<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						{{crud.p.pageNumber}} / {{crud.p.pages}} <span class="caret"></span>
					</button>
					<ul class="dropdown-menu dropdown-menu-sm">
						<li ng-repeat="_ in ((_ = []) && (_.length=(crud.p.pages||0)) && _) track by $index">
							<a ng-click="crud.p.goto($index+1)">{{$index+1}} / {{crud.p.pages}}</a>
						</li>
					</ul>
				</div>
				<button class="btn btn-default" ng-click="crud.p.next();"><i class="fa fa-forward"></i></button>
				<button class="btn btn-default" ng-click="crud.p.last();"><i class="fa fa-step-forward"></i></button>
				<button class="btn btn-default" ng-click="crud.p.load();"><i class="fa fa-refresh"></i></button>
			</div>
			<div class="pull-right">
				<span class="hidden-xs">共有{{crud.p.total}}条数据，显示第{{crud.p.from}}条到第{{crud.p.to}}条，每页</span>
				<div class="btn-group">
					<button class="btn btn-default dropdown-toggle" style="min-width:55px" data-toggle="dropdown">
						{{crud.p.pageSize}} <span class="caret"></span>
					</button>
					<ul class="dropdown-menu pull-right">
						<li ng-repeat="s in [1, 5,10,20,30,50]" style="min-width:55px"><a ng-click="crud.p.size(s)">{{s}}</a></li>
					</ul>
				</div>
				条
			</div>
		</div>
	</footer>
	<div id="templateAddModal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
					<h4 class="modal-title">添加模板</h4>
				</div>
				<div class="modal-body">
					<form id="templateAddForm" class="form-horizontal" autocomplete="off" novalidate>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4" for="add-projectId">所属项目</label>
							<div class="col-xs-9 col-sm-5">
								<select id="add-projectId" class="form-control" ng-required
								        ng-model="crud.record.project"
								        ng-options="option.name for option in projects">
									<option value="">-- 请选择项目 --</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<div class="col-xs-offset-3 col-sm-offset-4 col-xs-9 col-sm-5">
								<div class="checkbox">
									<label><input id="add-cap" type="checkbox" ng-model="crud.record.cap"> 文件首字母大写</label>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4" for="add-path">文件保存路径</label>
							<div class="col-xs-9 col-sm-5">
								<input id="add-path" name="path" class="form-control" type="text" ng-model="crud.record.path" required>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4" for="add-suffix">文件保存后缀</label>
							<div class="col-xs-9 col-sm-5">
								<input id="add-suffix" name="suffix" class="form-control" type="text" ng-model="crud.record.suffix" required>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4" for="add-content">模板内容</label>
							<div class="col-xs-9 col-sm-5">
								<label class="btn btn-info">选择模板文件
									<input style="display:none" type="file" onchange="readContent(this.files)">
								</label>
							</div>
						</div>
						<textarea id="add-content" class="form-control" ng-model="crud.record.content" rows="5"></textarea>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" ng-click="crud.record.projectId=crud.record.project.id;crud.save(crud.record)">添加</button>
				</div>
			</div>
		</div>
	</div>
	<div id="templateEditModal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
					<h4 class="modal-title">修改模板</h4>
				</div>
				<div class="modal-body">
					<form id="templateEditForm" class="form-horizontal" autocomplete="off" novalidate>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4">所属项目</label>
							<div class="col-xs-9 col-sm-5">
								<p class="form-control-static">{{projects[crud.record.projectId].name}}</p>
							</div>
						</div>
						<div class="form-group">
							<div class="col-xs-offset-3 col-sm-offset-4 col-xs-9 col-sm-5">
								<div class="checkbox">
									<label><input id="edit-cap" type="checkbox" ng-model="crud.record.cap" ng-false-value="false"> 文件首字母大写</label>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4" for="edit-path">文件保存路径</label>
							<div class="col-xs-9 col-sm-5">
								<input id="edit-path" name="path" class="form-control" type="text" ng-model="crud.record.path" required>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4" for="edit-suffix">文件保存后缀</label>
							<div class="col-xs-9 col-sm-5">
								<input id="edit-suffix" name="suffix" class="form-control" type="text" ng-model="crud.record.suffix" required>
							</div>
						</div>
						<div class="form-group">
							<div class="col-xs-offset-3 col-sm-offset-4 col-xs-9 col-sm-5">
								<div class="checkbox">
									<label><input type="checkbox" ng-model="crud.record.valid"> 启用</label>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4" for="edit-content">模板内容</label>
							<div class="col-xs-9 col-sm-5">
								<label class="btn btn-info">选择模板文件
									<input style="display:none" type="file" onchange="readContent(this.files)">
								</label>
							</div>
						</div>
						<textarea id="edit-content" class="form-control" ng-model="crud.record.content" rows="5"></textarea>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" ng-click="crud.save(crud.record)">保存</button>
				</div>
			</div>
		</div>
	</div>
	<div id="templateViewModal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
					<h4 class="modal-title">查看模板</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal">
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4">项目名称</label>
							<div class="col-xs-9 col-sm-5">
								<div class="form-control">{{projects[crud.record.projectId].name}}</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4">项目目录</label>
							<div class="col-xs-9 col-sm-5">
								<div class="form-control">{{projects[crud.record.projectId].path}}</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4">文件首字母大写</label>
							<div class="col-xs-9 col-sm-5">
								<div class="form-control">{{crud.record.cap}}</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4">文件保存路径</label>
							<div class="col-xs-9 col-sm-8">
								<div class="form-control">{{crud.record.path}}</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4">文件后缀</label>
							<div class="col-xs-9 col-sm-5">
								<div class="form-control">{{crud.record.suffix}}</div>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4">模板</label>
						</div>
						<pre class="form-control-static">{{crud.record.content}}</pre>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4">创建时间</label>
							<div class="col-xs-9 col-sm-5">
								<div class="form-control">{{crud.record.createTime}}</div>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
</div>